<template>
  <div class="breadcrumb-root">
    <el-breadcrumb separator=">">
      <template v-for="item in breadcrumbArr" :key="item">
        <el-breadcrumb-item>{{ item }}</el-breadcrumb-item>
      </template>
    </el-breadcrumb>
  </div>
</template>

<script lang="ts" setup>
import type { MenuType } from '@/types'
import { localCache } from '@/utils/cache'
import { computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

const path2Breadcrumb = (path: string) => {
  const breadcrumb = []
  const menus: MenuType[] = localCache.get('menus')
  for (const menu of menus) {
    if (menu.path === path) {
      breadcrumb.push(menu.name)
    }
    if (menu.children) {
      for (const child of menu.children) {
        if (child.path === path) {
          breadcrumb.push(menu.name)
          breadcrumb.push(child.name)
        }
      }
    }
  }

  return breadcrumb
}

const breadcrumbArr = computed(() => path2Breadcrumb(route.path))
</script>

<style lang="scss" scoped>
.breadcrumb-root {
  :deep(.el-breadcrumb__inner) {
    color: rgba(51, 51, 51, 1);
    font-size: 18px;
  }
}
</style>
